<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="./style/style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./js/index.js"></script>
</head>
<body>
<div class="body">
    <div class="head">Fun keyboard</div>
    <div class="main-keybord">
        <div>
            <ul class="main-keybord-list">
                <li>Esc</li>
                <li class="main-keybord-list-item1"></li>
                <li>F1</li>
                <li>F2</li>
                <li>F3</li>
                <li>F4</li>
                <li class="main-keybord-list-item2"></li>
                <li>F5</li>
                <li>F6</li>
                <li>F7</li>
                <li>F8</li>
                <li class="main-keybord-list-item2">F9</li>
                <li>F9</li>
                <li>F10</li>
                <li>F11</li>
                <li class="toright">F12</li>
                <li id="main-keybord-list-item3">PrtScSysrq</li>
                <li id="main-keybord-list-item3">ScrollLock</li>
                <li id="main-keybord-list-item3" class="toright">PauseBreak</li>
                <li class="op">.</li>
                <li class="op">.</li>
                <li class="op">.</li>
            </ul>
        </div>
        <div>
            <ul class="main-keybord-list list2">
                <li class="main-keybord-list1-item1"><span>~</span><span>`</span></li>
                <li class="main-keybord-list1-item1"><span>!</span><span>1</span></li>
                <li class="main-keybord-list1-item1"><span>@</span><span>2</span></li>
                <li class="main-keybord-list1-item1"><span>#</span><span>3</span></li>
                <li class="main-keybord-list1-item1"><span>$</span><span>4</span></li>
                <li class="main-keybord-list1-item1"><span>%</span><span>5</span></li>
                <li class="main-keybord-list1-item1"><span>^</span><span>6</span></li>
                <li class="main-keybord-list1-item1"><span>&</span><span>7</span></li>
                <li class="main-keybord-list1-item1"><span>*</span><span>8</span></li>
                <li class="main-keybord-list1-item1"><span>(</span><span>9</span></li>
                <li class="main-keybord-list1-item1"><span>)</span><span>0</span></li>
                <li class="main-keybord-list1-item1"><span>-</span><span>_</span></li>
                <li class="main-keybord-list1-item1"><span>+</span><span>=</span></li>
                <li class="main-keybord-list1-item2 toright">
                    <svg t="1682942663096" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="13384" width="40" height="40">
                        <path d="M1017.28884579 534.09109115l-662.73273745 1e-8L354.55610835 472.72694864 1017.28884579 472.72694864l-2e-8 61.36414251z"
                              fill="#515151" p-id="13385"></path>
                        <path d="M358.28692148 717.71907109L1.43220042 508.13772668l356.85472106-215.24570478 0 424.82704919z"
                              fill="#515151" p-id="13386"></path>
                    </svg>
                </li>
                <li id="main-keybord-list2-item3" style="line-height: 40px">Insert</li>
                <li id="main-keybord-list2-item3" style="line-height: 40px">Home</li>
                <li id="main-keybord-list2-item3" class="toright">PageUp</li>
                <li id="main-keybord-list2-item3">NumLock</li>
                <li>/</li>
                <li>*</li>
                <li>-</li>
            </ul>
        </div>
        <div>
            <ul class="main-keybord-list position">
                <li class="main-keybord-list3-item1">tab</li>
                <li>Q</li>
                <li>W</li>
                <li>E</li>
                <li>R</li>
                <li>T</li>
                <li>Y</li>
                <li>U</li>
                <li>I</li>
                <li>O</li>
                <li>P</li>
                <li class="main-keybord-list1-item1"><span>{</span><span>[</span></li>
                <li class="main-keybord-list1-item1"><span>}</span><span>]</span></li>
                <li class="toright main-keybord-list3-item2">Enter</li>
                <li id="main-keybord-list2-item3">Delete</li>
                <li id="main-keybord-list2-item3" style="line-height: 40px">End</li>
                <li id="main-keybord-list2-item3" class="toright">PageDown</li>
                <li class="SetFontSize main-keybord-list1-item1"><span>7</span><span>Home</span></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>8</span><span><svg t="1682942068167" class="icon"
                                                                                          viewBox="0 0 1024 1024"
                                                                                          version="1.1"
                                                                                          xmlns="http://www.w3.org/2000/svg"
                                                                                          p-id="2806" width="20"
                                                                                          height="20"><path
                        d="M484.79497576 929.30892267l0-573.37869588L537.8855959 355.93022679 537.88559591 929.30892267l-53.09062015-1e-8z"
                        fill="" p-id="2807"></path><path
                        d="M325.92494307 349.78302687L507.24913481 41.04183601l186.22484524 308.74119086-367.54903697 0z"
                        fill="" p-id="2808"></path></svg></span></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>9</span><span>PaUp</span></li>
                <li class="plus">+</li>
            </ul>
        </div>
        <div>
            <ul class="main-keybord-list">
                <li class="main-keybord-list4-item1">Caps Lock</li>
                <li>A</li>
                <li>S</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li class="main-keybord-list1-item1"><span>:</span><span>;</span></li>
                <li class="main-keybord-list1-item1"><span>"</span><span>'</span></li>
                <li class="main-keybord-list1-item1 toright"><span>|</span><span>\</span></li>
                <li class="hidden">.</li>
                <li class="hidden">.</li>
                <li class="toright hidden">.</li>
                <li class="SetFontSize main-keybord-list1-item1"><span>4</span><span><svg t="1682942148858" class="icon"
                                                                                          viewBox="0 0 1024 1024"
                                                                                          version="1.1"
                                                                                          xmlns="http://www.w3.org/2000/svg"
                                                                                          p-id="2958" width="20"
                                                                                          height="20"><path
                        d="M1017.28884579 534.09109115l-662.73273745 1e-8L354.55610835 472.72694864 1017.28884579 472.72694864l-2e-8 61.36414251z"
                        fill="" p-id="2959"></path><path
                        d="M358.28692148 717.71907109L1.43220042 508.13772668l356.85472106-215.24570478 0 424.82704919z"
                        fill="" p-id="2960"></path></svg></span></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>5</span></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>6</span><span><svg t="1682942180702" class="icon"
                                                                                          viewBox="0 0 1024 1024"
                                                                                          version="1.1"
                                                                                          xmlns="http://www.w3.org/2000/svg"
                                                                                          p-id="3110" width="20"
                                                                                          height="20"><path
                        d="M45.53714915 504.31464081l611.60394228 0L657.14109143 560.94463562 45.53714915 560.94463562l2e-8-56.62999481z"
                        fill="" p-id="3111"></path><path
                        d="M663.69810468 334.85327261L993.02204159 528.26574379l-329.32393691 198.63983493 0-392.05230611z"
                        fill="" p-id="3112"></path></svg></span></li>
                <li>+</li>
            </ul>
        </div>
        <div>
            <ul class="main-keybord-list position">
                <li class="main-keybord-list5-item1">Shift</li>
                <li>Z</li>
                <li>X</li>
                <li>C</li>
                <li>V</li>
                <li>B</li>
                <li>N</li>
                <li>M</li>
                <li class="main-keybord-list1-item1"><span><</span><span>,</span></li>
                <li class="main-keybord-list1-item1"><span>></span><span>.</span></li>
                <li class="main-keybord-list1-item1"><span>?</span><span>/</span></li>
                <li class="main-keybord-list5-item1 toright">Shift</li>
                <li class="hidden"></li>
                <li>
                    <svg t="1682942457786" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="11712" width="20" height="20">
                        <path d="M484.79497576 929.30892267l0-573.37869588L537.8855959 355.93022679 537.88559591 929.30892267l-53.09062015-1e-8z"
                              fill="#bfbfbf" p-id="11713"></path>
                        <path d="M325.92494307 349.78302687L507.24913481 41.04183601l186.22484524 308.74119086-367.54903697 0z"
                              fill="#bfbfbf" p-id="11714"></path>
                    </svg>
                </li>
                <li class="hidden toright"></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>|</span><span>End</span></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>2</span><span><svg t="1682942218707" class="icon"
                                                                                          viewBox="0 0 1024 1024"
                                                                                          version="1.1"
                                                                                          xmlns="http://www.w3.org/2000/svg"
                                                                                          p-id="3262" width="20"
                                                                                          height="20"><path
                        d="M533.74591785 14.43962576l0 652.37753843L473.34059007 666.81716419 473.34059007 14.43962576l60.40532778 1e-8z"
                        fill="" p-id="3263"></path><path
                        d="M714.5047106 673.81131166L508.1980747 1025.0901777l-211.88249064-351.27886604 418.18912654 0z"
                        fill="" p-id="3264"></path></svg></span></li>
                <li class="SetFontSize main-keybord-list1-item1"><span>3</span><span>PaDn</span></li>
                <li class="enter">Enter</li>
            </ul>
        </div>
        <div>
            <ul class="main-keybord-list">
                <li>Ctrl</li>
                <li>win</li>
                <li>Alt</li>
                <li>Fn</li>
                <li class="main-keybord-list6-item1"></li>
                <li>Alt</li>
                <li>win</li>
                <li>Fn</li>
                <li class="toright">Ctrl</li>
                <li>
                    <svg t="1682942567252" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="12352" width="20" height="20">
                        <path d="M1017.28884579 534.09109115l-662.73273745 1e-8L354.55610835 472.72694864 1017.28884579 472.72694864l-2e-8 61.36414251z"
                              fill="#bfbfbf" p-id="12353"></path>
                        <path d="M358.28692148 717.71907109L1.43220042 508.13772668l356.85472106-215.24570478 0 424.82704919z"
                              fill="#bfbfbf" p-id="12354"></path>
                    </svg>
                </li>
                <li>
                    <svg t="1682942517892" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="11960" width="20" height="20">
                        <path d="M533.74591785 14.43962576l0 652.37753843L473.34059007 666.81716419 473.34059007 14.43962576l60.40532778 1e-8z"
                              fill="#bfbfbf" p-id="11961"></path>
                        <path d="M714.5047106 673.81131166L508.1980747 1025.0901777l-211.88249064-351.27886604 418.18912654 0z"
                              fill="#bfbfbf" p-id="11962"></path>
                    </svg>
                </li>
                <li class="toright">
                    <svg t="1682942592233" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="12552" width="20" height="20">
                        <path d="M45.53714915 504.31464081l611.60394228 0L657.14109143 560.94463562 45.53714915 560.94463562l2e-8-56.62999481z"
                              fill="#bfbfbf" p-id="12553"></path>
                        <path d="M663.69810468 334.85327261L993.02204159 528.26574379l-329.32393691 198.63983493 0-392.05230611z"
                              fill="#bfbfbf" p-id="12554"></path>
                    </svg>
                </li>
                <li class="width SetFontSize main-keybord-list1-item1"><span>0</span><span>lns</span></li>
                <li>.</li>
                <li class="hidden">Enter</li>
            </ul>
        </div>
    </div>
</div>
<div style="width:300px;margin:0 auto; padding:20px 0;">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53038102530513"
       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
            src="https://www.beian.gov.cn/portal/download?token=99aac4f3-cf74-47fd-9b5b-c5d755b3a52c"
            style="float:left;"/>
        <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">滇公网安备
            53038102530515号</p></a>
    <p>
        <a href="https://beian.miit.gov.cn/" target="_blank">滇ICP备2023001037号-2</a>
    </p>
</div>
</body>
</html>
